<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>个人中心</title>
    <base href=" <%=basePath%>">

    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/hoverifyBootnav.css">
    <link href="/assets/js/jquery.jqplot/jquery.jqplot.css">
    <%--<link href="/assets/css/components.css" rel="stylesheet">  --%>
    <link href="/assets/css/header.css" rel="stylesheet">
    <link href="/assets/css/profile.css" rel="stylesheet">
    <link href="/assets/datatables/datatables.min.css" rel="stylesheet" type="text/css">
    <link href="/assets/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/assets/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/bootstrapVaildator/bootstrapValidator.min.css" rel="stylesheet" type="text/css" />

    <style>
        body {
            margin-top: 60px;
            /*background-color: rgb(233, 236, 243);*/
        }
    </style>
</head>
<body>

<header class="container">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <%--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--%>
                <%--<ul class="nav navbar-nav navbar-right">--%>
                    <%--<li><a href="#">题目 </a></li>--%>
                    <%--<li class="dropdown">--%>
                        <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"--%>
                           <%--aria-expanded="false">排行榜 <span class="caret"></span></a>--%>
                        <%--<ul class="dropdown-menu mega-menu-3 transition">--%>
                            <%--<li><a href="#">天梯榜</a></li>--%>
                            <%--<li><a href="#">英雄榜</a></li>--%>
                        <%--</ul>--%>
                    <%--</li>--%>
                    <%--<li class="dropdown">--%>
                        <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"--%>
                           <%--aria-expanded="false">帮助 <span class="caret"></span></a>--%>
                        <%--<ul class="dropdown-menu mega-menu-3 transition">--%>
                            <%--<li><a href="#">Help 1</a></li>--%>
                            <%--<li><a href="#">Help 2</a></li>--%>
                        <%--</ul>--%>
                    <%--</li>--%>
                    <%--<li class="dropdown">--%>
                        <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"--%>
                           <%--aria-expanded="false" id="dropdown-user">--%>
                            <%--角色姓名<span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>--%>
                        <%--<div class="dropdown-menu mega-menu-3 transition  eader-user">--%>
                            <%--<ul>--%>
                                <%--<li class="nav-title"></li>--%>
                                <%--<li>--%>
                                    <%--<a id="btn-avatar" class="launch-modal" data-modal-id="modal-avator"--%>
                                       <%--data-toggle="modal" data-target="#modal-avatar">--%>
                                        <%--<img src="/user/avatar" id="avatar" width="128px" height="128px"--%>
                                             <%--style="border-radius: 50%">--%>
                                    <%--</a>--%>
                                    <%--&lt;%&ndash;<iframe src="" width="128" height="128" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>&ndash;%&gt;--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                            <%--<ul class="two-column">--%>
                                <%--<li class="nav-title"></li>--%>
                                <%--<li class="header-user" id="header-user-nickname">用户名</li>--%>
                                <%--<li class="header-user" id="header-user-level">等级_称号</li>--%>
                                <%--<li class="header-user" id="header-user-money">金币</li>--%>
                                <%--<li class="header-user" id="header-user-prestige">威望值</li>--%>
                            <%--</ul>--%>
                            <%--<ul class="three-column"></ul>--%>
                            <%--<ul>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn-menu" id="btn-user">个人中心</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                            <%--<ul>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn-menu" id="btn-mall">游戏商城</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                            <%--<ul>--%>
                                <%--<li>--%>
                                    <%--<a href="/user/logout" class="btn-menu" id="btn-logout">注销登录</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        <%--</div>--%>
                    <%--</li>--%>
                <%--</ul><!-- 2 Menu Examples Ends -->--%>
            <%--</div><!-- /.navbar-collapse -->--%>

            <div class="row">
                <div class="separator " style="float: right">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#">题目</a></li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                排行榜 <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">天梯榜</a></li>
                                <li class="divider"></li>
                                <li><a href="#">英雄榜</a></li>
                            </ul>
                        </li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                帮助 <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">help 1</a></li>
                                <li><a href="#">help 2</a></li>
                            </ul>
                        </li>
                        <li class="dropdown pull-right active">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="dropdown-user">
                                角色姓名<span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>
                            <div class="dropdown-menu mega-menu-3 transition  eader-user">
                                <ul>
                                    <li class="nav-title"></li>
                                    <li>
                                        <a  id="btn-avatar" class="launch-modal" data-modal-id="modal-avator" data-toggle="modal" data-target="#modal-avatar">
                                            <img src="/user/avatar" id="avatar" width="128px" height="128px" style="border-radius: 50%">
                                        </a>
                                        <%--<iframe src="" width="128" height="128" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>--%>
                                    </li>
                                </ul>
                                <ul class="two-column">
                                    <li class="nav-title"></li>
                                    <li class="header-user" id="header-user-nickname">用户名</li>
                                    <li class="header-user" id="header-user-level">等级_称号</li>
                                    <li class="header-user" id="header-user-money">金币</li>
                                    <li class="header-user" id="header-user-prestige">威望值</li>
                                </ul>
                                <ul class="three-column"></ul>
                                <ul>
                                    <li>
                                        <a href="/user/profile" class="btn-menu" id="btn-user">个人中心</a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#" class="btn-menu" id="btn-mall">游戏商城</a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="/user/logout" class="btn-menu" id="btn-logout">注销登录</a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </nav>


</header><!-- /container -->
<section class="container" style="margin-top: 40px">

    <div class="row1">
        <%--基本信息开始--%>
        <div class="col-md-3">
            <div class="portlet light profile-sidebar-portlet bordered">
                <div class="profile-userpic">
                    <img src="/user/avatar" class="img-responsive" alt=""></div>
                <div class="profile-usertitle">
                    <div class="profile-usertitle-name" id="user-name"></div>
                    <div class="profile-usertitle-job" id="user-ch"></div>
                </div>
                <div class="row list-separated profile-stat">
                    <div class="col-md-4 col-sm-4 col-xs-6">
                        <div class="uppercase profile-stat-title" id="user-level"></div>
                        <div class="uppercase profile-stat-text"> 等级</div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6">
                        <div class="uppercase profile-stat-title" id="user-exp"></div>
                        <div class="uppercase profile-stat-text"> 经验</div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6">
                        <div class="uppercase profile-stat-title" id="user-money"></div>
                        <div class="uppercase profile-stat-text"> 金币</div>
                    </div>
                </div>
            </div>
            <h1 style="color: red">↑导航栏更新头像后此处应更新</h1>
        </div>
        <%--基本信息结束--%>
        <%--主体内容开始--%>
        <div class="col-md-9">
            <%--标签栏开始--%>
            <div class="tabbable-line tabbable-full-width">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab-profile-info" data-toggle="tab">账号信息</a>
                    </li>
                    <li><a href="#tab-profile-changeinfo" data-toggle="tab">修改资料</a></li>
                    <li><a href="#tab-profile-userAchievement" data-toggle="tab">个人成就</a></li>
                    <li><a href="#tab-profile-transactions" data-toggle="tab">金钱记录</a></li>
                </ul>
            </div>
            <%--标签栏结束--%>
                <hr/>
            <%--标签页开始--%>
            <div id="tab-profile-content" class="profile-main tab-content">
                <div class="tab-pane fade in active" id="tab-profile-info">
                    <div>
                        <table class="table">
                            <thead>
                            <tr>
                                <th id="table-info-id">ID</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>解决</td>
                                <td id="num-solve">解决数</td>
                            </tr>
                            <tr>
                                <td>提交</td>
                                <td id="num-submit">提交数</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row1">
                        <div id="chart1" style="width: 600px;height: 400px;"></div>
                    </div>
                    <div class="row1">
                        <div id="chart2" style="width: 600px;height: 400px;"></div>
                    </div>
                    <%--<div class="row">--%>
                        <%--<div id="chart1" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px"></div>--%>
                        <%--<div id="chart2" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px"></div>--%>
                    <%--</div>--%>
                </div>
                <div class="tab-pane fade" id="tab-profile-changeinfo">
                    <form role="form" action="#" method="post" class="form-profile" id="form-profile">
                        <div class="form-group profile-group">
                            <label class="sr-only">昵称</label>
                            <div><h4>邮箱：</h4></div>
                            <button type="button" class="btn btn-default btn-profile-item" id="btn-email" disabled="disabled">
                            </button>
                        </div>
                        <div class="form-group profile-group">
                            <label class="sr-only">昵称</label>
                            <div><h4>昵称：</h4></div>
                            <button type="button" class="btn btn-default btn-profile-item" id="btn-nickname"
                                    data-toggle="tooltip" data-placement="top" title="点击修改">昵称...
                            </button>
                            <div id="hiden-nickname" class="input-group"></div>
                        </div>
                        <div class="form-group profile-group">
                            <label class="sr-only">密码</label>
                            <div><h4>密码：</h4></div>
                            <button type="button" class="btn btn-default btn-profile-item" id="btn-password"
                                    data-toggle="modal" data-target="#changePassword" data-placement="top" title="点击修改">
                                密码...
                            </button>


                            <div class=" input-group " id="hiden-password"></div>
                        </div>
                        <div class="form-group profile-group">
                            <label class="sr-only">QQ</label>
                            <div><h4>QQ：</h4></div>
                            <button type="button" class="btn btn-default btn-profile-item" id="btn-qq"
                                    data-toggle="tooltip"
                                    data-placement="top" title="点击修改">QQ...
                            </button>
                            <div class="input-group " id="hiden-qq"></div>
                        </div>
                        <div class="form-group profile-group">
                            <label class="sr-only">学号</label>
                            <div><h4>学号：</h4></div>
                            <button type="button" class="btn btn-default btn-profile-item" id="btn-sno"
                                    data-toggle="tooltip" data-placement="top" title="点击修改">学号...
                            </button>
                            <div class="input-group" id="hiden-sno"></div>
                        </div>
                    </form>
                    <h1 style="color: red">↑此处应有回车提交和默认文字</h1>
                </div>
                <div class="tab-pane fade" id="tab-profile-userAchievement">
                    <div class="list-group">
                        <li class="list-group-item"><span class="label label-success pull-right">已获得</span>成就</li>
                        <li class="list-group-item"><span class="label label-default pull-right">未获得</span>成就</li>
                        <li class="list-group-item"><span class="badge badge-success">未获得</span>成就</li>
                        <li class="list-group-item"><span class="badge">未获得</span>成就</li>
                        <li class="list-group-item"><span class="badge">未获得</span>成就</li>
                        <h1 style="color: red">↑此块还没做</h1>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-profile-transactions">
                    <table id="table-money" class="table table-striped table-bordered table-hover"  width="100%">
                        <thead>
                        <tr>
                            <th>变动原因</th>
                            <th>金钱变动</th>
                            <th>变动时间</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <%--标签页结束--%>
        </div>
        <%--主体内容结束--%>
    </div>
</section>

<!-- MODAL -->
<div class="modal fade" id="changePassword" tabindex="-1" role="dialog" aria-labelledby="changePasswordLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form role="form" method="post"  id="form-password" onsubmit="return false;">
            <div class="modal-header">
                <h4 class="modal-title" id="changePasswordLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                        <label class="sr-only">原密码</label>
                        <input type="text" name="password_old" placeholder="原密码" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">新密码</label>
                        <input type="text" name="password_new" placeholder="新密码" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">确认新密码</label>
                        <input type="text" name="password_new2" placeholder="确认新密码" class="form-control">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="submit-password" class="btn btn-primary">提交</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- Javascript -->
<script src="/assets/js/jquery-latest.js"></script>
<script src="/assets/js/echarts.common.min.js"></script>
<%--<script src="/assets/js/jquery.jqplot/jquery.jqplot.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.logAxisRenderer.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.canvasTextRenderer.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.dateAxisRenderer.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.categoryAxisRenderer.min.js"></script>--%>
<%--<script src="/assets/js/jquery.jqplot/jqplot.barRenderer.min.js"></script>--%>
<script src="/assets/js/jquery-1.11.1.min.js"></script>
<script src="/assets/js/jquery.velocity.min.js"></script>
<script src="/assets/js/hoverifyBootnav.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/datatables/datatables.min.js" type="text/javascript"></script>
<script src="/assets/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="/assets/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script src="/assets/bootstrapVaildator/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="/assets/js/profile.js"></script>
</body>
</html>